<template>
  <div>
    <button @click="flag = !flag">切换组件</button>

    <hr />

    <!-- 属性：include 指定要缓存的组件，exclude 排除要换成的组价，max 最大缓存组件数量不缓存活跃度不高的组件 -->
    <keep-alive :include="['A']">
      <A v-if="flag" />
      <B v-else />
    </keep-alive>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import A from "./A.vue";
import B from "./B.vue";

const flag = ref(false);
</script>

<style scoped></style>
